<template>
	<view class="category-container">
		<view class="category-grid">
			<view class="category-item" v-for="category in categories" :key="category.id">
				<image :src="category.icon" mode="aspectFit"></image>
				<text>{{ category.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "nav",
		data() {
			return {
				categories: [{
						id: 1,
						name: '切割灯',
						icon: '/static/de.png'
					},
					{
						id: 2,
						name: '光束灯',
						icon: '/static/de.png'
					},
					{
						id: 3,
						name: '三合一',
						icon: '/static/de.png'
					},
					{
						id: 4,
						name: '染色灯',
						icon: '/static/de.png'
					},
					{
						id: 5,
						name: '帕灯',
						icon: '/static/de.png'
					},
					{
						id: 6,
						name: '洗墙灯',
						icon: '/static/de.png'
					},
					{
						id: 7,
						name: '面光灯',
						icon: '/static/de.png'
					},
					{
						id: 8,
						name: '影视灯',
						icon: '/static/de.png'
					},
					{
						id: 9,
						name: '其他灯具',
						icon: '/static/de.png'
					},
					{
						id: 10,
						name: '更多',
						icon: '/static/de.png'
					}
				],
			};
		}
	}
</script>

<style lang="scss">
  // 分类导航
  $primary-color: #1677ff;
  $text-color: #333;
  $subtext-color: #666;
  $light-text-color: #999;
  $bg-color: #f5f5f5;
  $card-bg: #fff;
  $border-radius: 10rpx;
  $padding-base: 20rpx;
  $margin-base: 20rpx;
  .category-container {
    background-color: $card-bg;
    padding: $padding-base 0;
    
    .category-grid {
      display: flex;
      flex-wrap: wrap;
      padding: 0 $padding-base;
      
      .category-item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 25rpx;
        
        image {
          width: 70rpx;
          height: 70rpx;
          margin-bottom: 10rpx;
        }
        
        text {
          font-size: 24rpx;
          color: $subtext-color;
        }
      }
    }
  }
</style>